<style lang="less" scoped src="./user.less"></style>
<script src="./user.js"></script>

<template>
    <div>
        <div class="main-div">
            <div style="width: 15%" class="tree-div">
                <Tree :data="orgTree" @on-select-change="treeSelect"></Tree>
            </div>
            <div style="width: 85%;">
                <div class="main-table" style="font-size: 15px;">
                    <Row align="middle">
                        <Col span="1">
                            姓名:
                        </Col>
                        <Col span="5">
                            <Input  style="width: 98%" v-model="queryData.name"></Input>
                        </Col>
                    </Row>
                    <Row class="main-table" style="font-size: 15px;">
                        <Col span="21">
                        </Col>
                    </Row>
                </div>
                <div>
                    <span @click="showAdd"><Button type="primary" icon="android-add">添加</Button></span>
                </div>

                <div class="main-table">
                    <Table border :columns="columns" :data="data"></Table>
                </div>
                <div class="pagination">
                    <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList" show-total show-elevator></Page>
                </div>
            </div>
        </div>
        <!--  <Modal
                 v-model="modalVisible"
                 title="用户信息"
                 @on-ok="modalVisible = false"
                 @on-cancel="modalVisible = false">
             <Form :model="formData" :label-width="80">
                 <FormItem label="ID">
                     {{formData.id}}
                 </FormItem>
                 <FormItem label="账号">
                     {{formData.loginid}}
                 </FormItem>
                 <FormItem label="名称">
                     {{formData.name}}
                 </FormItem>
                 <FormItem label="电话">
                     {{formData.phone}}
                 </FormItem>
                 <FormItem label="状态">
                     {{formData.status}}
                 </FormItem>
             </Form>
         </Modal> -->

        <Modal
                v-model="saveModalVisible"
                :closable="true"
                :title="(formData.id ? '修改' : '新增') + '用户'"
                width="65%" >
            <div class="modal-div">
                <Form :label-width="80" :model="formData" :rules="formDataRules" ref="formData">
                    <Row>
                        <Col span="12">
                            <FormItem prop="depId" label="归属部门:">
                                <Select v-model="formData.depId" @on-change="haha">
                                    <Option v-for="item in depList" :value="item.id" >{{item.name}}</Option>
                                </Select>
                            </FormItem>
                            <!--<FormItem prop="areaId" label="归属区域">-->
                                <!--<Select v-model="formData.areaId">-->
                                    <!--<Option v-for="item in areaList" :value="item.id" >{{item.name}}</Option>-->
                                <!--</Select>-->
                            <!--</FormItem>-->
                        </Col>
                        <Col span="12">
                            <FormItem prop="orgId" label="归属机构:">
                                <Select v-model="formData.orgId" @on-change="whenSelectOrg">
                                    <Option v-for="item in orgList" :value="item.id" >{{item.name}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem prop="name" label="姓名:">
                                <Input v-model="formData.name"  ></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem prop="loginid" label="登录名:">
                                <Input v-model="formData.loginid" ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem prop="passwordShow" label="密码:">
                                <Input v-model="formData.passwordShow" type="password" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem prop="passwordRe" label="确认密码:">
                                <Input v-model="formData.passwordRe" type="password"></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem prop="sex" label="性别:">
                                <Select v-model="formData.sex">
                                    <Option :value="1">男</Option>
                                    <Option :value="2">女</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem prop="brithday" label="出生日期:">
                                <DatePicker type="date"  v-model="formData.brithday" style="width:100%"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem prop="phone" label="家庭电话:">
                                <Input v-model="formData.phone"  ></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem prop="officephone" label="办公电话:">
                                <Input v-model="formData.officephone"  ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem prop="cellphone" label="联系手机:">
                                <Input v-model="formData.cellphone" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem prop="email" label="邮箱:">
                                <Input v-model="formData.email" ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                         <Col span="24">
                             <FormItem prop="address" label="地址:">
                                 <Input v-model="formData.address"  ></Input>
                             </FormItem>
                         </Col>
                    </Row>
                    <!--<Row>-->
                        <!--<Col span="24">-->
                            <!--<FormItem prop="areaIds" label="校区:">-->
                                <!--<Checkbox-group :label-in-value="true"-->
                                                <!--v-model="formData.areaIds" size="large"-->
                                                <!--style="margin-left: 10px;">-->
                                    <!--<Checkbox v-for="(item,key) in areaList" :key="key" :label="item.id" disabled>-->
                                        <!--<span>{{item.name}}</span>-->
                                    <!--</Checkbox>-->
                                <!--</Checkbox-group>-->
                                <!--&lt;!&ndash;<Input v-model="formData.address"  ></Input>&ndash;&gt;-->
                            <!--</FormItem>-->
                        <!--</Col>-->
                    <!--</Row>-->
                <Row>
                    <Col span="24">
                        <FormItem prop="description" label="描述:">
                            <Input type="textarea" :rows="2" v-model="formData.description" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                </Form>
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="titele">-->
                        <!--<span style="color: red">*</span>归属地区：-->
                    <!--</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Select v-model="formData.orgId" @on-change="whenSelectOrg">-->
                            <!--<Option v-for="item in areaList" :value="item.id" >{{item.name}}</Option>-->
                        <!--</Select>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="titele"><span style="color: red">*</span>归属机构：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Select v-model="formData.orgId" @on-change="whenSelectOrg">-->
                            <!--<Option v-for="item in orgList" :value="item.id" >{{item.name}}</Option>-->
                        <!--</Select>-->
                        <!--&lt;!&ndash;  <Input v-model="formData.name"  :readonly="true" icon="search" @on-click="whenTapDep"></Input> &ndash;&gt;-->
                    <!--</Col>-->
                    <!--<Col span="4" class="titele"><span style="color: red">*</span>归属部门：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Select v-model="formData.depId">-->
                            <!--<Option v-for="item in depList" :value="item.id" >{{item.name}}</Option>-->
                        <!--</Select>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="titele"><span style="color: red">*</span>姓名：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.name"  :readonly="isRead" ></Input>-->
                    <!--</Col>-->
                    <!--<Col span="4" class="titele"><span style="color: red">*</span>登录名：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.loginid" ></Input>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="titele"><span style="color: red">*</span>新密码：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.passwordShow" ></Input>-->
                    <!--</Col>-->
                    <!--<Col span="4" class="titele"><span style="color: red">*</span>确认密码：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.passwordRe" ></Input>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="titele">性别：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Select v-model="formData.sex">-->
                            <!--<Option :value="1">男</Option>-->
                            <!--<Option :value="2">女</Option>-->
                        <!--</Select>-->
                    <!--</Col>-->
                    <!--<Col span="4" class="titele">出生日期：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<DatePicker type="date"  v-model="formData.brithday" style="width:100%"></DatePicker>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="titele">家庭电话：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.phone"  ></Input>-->
                    <!--</Col>-->
                    <!--<Col span="4" class="titele">办公电话：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.officephone"  ></Input>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="titele"><span style="color: red">*</span>联系手机：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.cellphone" ></Input>-->
                    <!--</Col>-->
                    <!--<Col span="4" class="titele">邮箱：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.email" ></Input>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="titele">地址：</Col>-->
                    <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.address"  ></Input>-->
                    <!--</Col>-->
                    <!--&lt;!&ndash;<Col span="4" class="titele">用户职务：</Col>&ndash;&gt;-->
                    <!--&lt;!&ndash;<Col span="8" class="content">&ndash;&gt;-->
                        <!--&lt;!&ndash;<Select v-model="formData.job"></Select>&ndash;&gt;-->
                    <!--&lt;!&ndash;</Col>&ndash;&gt;-->
                <!--</Row>-->
                  <!--<Row class="table-Row">-->
                     <!--<Col span="4" class="titele"><span style="color: red" >*</span>用户角色：</Col>-->
                     <!--<Col span="20" class="content">-->
                         <!--<Checkbox-group v-model="roles" @on-change="whenSelectRolesItem" size="large">-->

                             <!--&lt;!&ndash;<Option v-for="item in classApplyList" :value="item.id" :key="item.id">{{item.name}}</Option>&ndash;&gt;-->
                             <!--&lt;!&ndash;<Checkbox label="1">香蕉</Checkbox>&ndash;&gt;-->
                             <!--&lt;!&ndash;<Checkbox label="2">苹果</Checkbox>&ndash;&gt;-->
                             <!--&lt;!&ndash;<Checkbox label="3">西瓜</Checkbox>&ndash;&gt;-->
                         <!--</Checkbox-group>-->
                     <!--</Col>-->
                 <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="titele">描述：</Col>-->
                    <!--<Col span="20" class="content">-->
                        <!--<Input type="textarea" :rows="2" v-model="formData.description" ></Input>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Modal v-model="roleModal">-->
                    <!--<Form>-->
                        <!--<Transfer-->
                                <!--:data="allRole"-->
                                <!--:target-keys="roleList"-->
                                <!--:titles="titles"-->
                                <!--:list-style="listStyle"-->
                                <!--filterable-->
                                <!--:filter-method="filterMethod"-->
                                <!--@on-change="handleChange"></Transfer>-->
                    <!--</Form>-->
                    <!--</Modal>-->
                <!--</Row>-->
            </div>
            <div slot="footer">
                <Button type="primary" @click="userSave('formData')">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="saveModalVisible = false">取消</Button>
            </div>
        </Modal>

        <Modal v-model="roleModal">
            <Form>
                <Transfer
                        :data="allRole"
                        :target-keys="roleList"
                        :titles="titles"
                        :list-style="listStyle"
                        filterable
                        :closable="true"
                        :filter-method="filterMethod"
                        @on-change="handleChange"></Transfer>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="roleSave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="roleModal = false">取消</Button>
            </div>
        </Modal>

        <Modal
                v-model="depTreeVisible"
                title="选择部门"
                :mask-closable="false"
        >
            <Tree :data="depTree"  @on-select-change="whenSelectDepTree"></Tree>
        </Modal>

        <!--<Modal-->
                <!--v-model="testflag"-->
                <!--title="测试"-->
                <!--:mask-closable="false"-->
        <!--&gt;-->
            <!--<Checkbox-group v-model="roles" @on-change="whenSelectRolesItem" size="large">-->
                <!--<Checkbox label="1">香蕉</Checkbox>-->
                <!--<Checkbox label="2">苹果</Checkbox>-->
                <!--<Checkbox label="3">西瓜</Checkbox>-->
            <!--</Checkbox-group>-->
        <!--</Modal>-->

    </div>
</template>

